/**
 * 文章标签管理配置文件
 * 定义标签管理页面的搜索配置、表格列配置和操作按钮配置
 */

import { h } from 'vue'
import { ElTag } from 'element-plus'

/**
 * 搜索条件配置
 * 定义标签管理页面的搜索表单项
 * @type {Array<Object>}
 */
export const searchConfig = [
  {
    field: 'name',
    label: '标签名称',
    component: 'Input',
    placeholder: '请输入标签名称',
    defaultValue: '',
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    placeholder: '请选择状态',
    defaultValue: '',
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' },
    ],
  },
  {
    field: 'createTimeRange',
    label: '创建时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  },
  {
    field: 'updateTimeRange',
    label: '修改时间',
    component: 'DateRangePicker',
    defaultValue: [],
    props: {
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD',
      type: 'daterange',
    },
  }
]

/**
 * 格式化日期时间
 * 将时间戳格式化为 YYYY-MM-DD HH:MM:SS 格式
 * 
 * @param {string|number} timestamp - 时间戳
 * @returns {string} 格式化后的日期时间字符串
 */
const formatDateTime = (timestamp) => {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return date
    .toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false,
    })
    .replace(/\//g, '-')
}

/**
 * 表格列配置
 * 定义标签管理表格的列结构
 * @type {Array<Object>}
 */
export const tableConfig = [
  {
    type: 'selection',
    width: 55,
    fixed: 'left',
    align: 'center',
  },
  {
    type: 'index',
    width: 55,
    label: '序号',
    align: 'center',
  },
  {
    prop: 'name',
    label: '标签名称',
    minWidth: 120,
    align: 'center',
  },
  {
    prop: 'description',
    label: '备注',
    minWidth: 180,
    align: 'center',
    showOverflowTooltip: true,
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    align: 'center',
    render: (row) =>
      h(
        ElTag,
        {
          type: row.status === '1' ? 'success' : 'danger',
        },
        () => (row.status === '1' ? '启用' : '禁用'),
      ),
  },
  {
    prop: 'createOn',
    label: '创建时间',
    minWidth: 180,
    align: 'center',
    render: (row) => formatDateTime(row.createOn),
  },
  {
    prop: 'updateOn',
    label: '修改时间',
    minWidth: 180,
    align: 'center',
    render: (row) => formatDateTime(row.updateOn),
  },
]

/**
 * 操作按钮配置
 * 定义标签管理页面的操作按钮
 * @type {Object}
 */
export const operateConfig = {
  add: {
    text: '新增标签',
    icon: 'Plus',
    type: 'primary'
  }
}
